<template>
  <d2-container class="shoplist">
    <template slot="header">店铺信息</template>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select size="small" v-model="activval" placeholder="激活状态">
          <el-option
            v-for="item in activlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select size="small" v-model="auditval" placeholder="请选择">
          <el-option
            v-for="item in auditlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input size="small" v-model="iptval" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="9">
        <el-date-picker
          style="width:100%;"
          size="small"
          v-model="timeval"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="60">
      </el-table-column>
      <el-table-column
        prop="shopname"
        label="店铺名"
        width="160">
      </el-table-column>
      <el-table-column
        label="授权状态"
        width="100">
        <template slot-scope="scope">
          <span>{{scope.row.restatus == 1 ? '已授权' : '未授权'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="激活状态"
        width="100">
        <template slot-scope="scope">
          <span>{{scope.row.status == 0 ? '未激活' : '已激活'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="user"
        label="商户名"
        width="130">
      </el-table-column>
      <el-table-column
        prop="session"
        label="session"
        width="250">
      </el-table-column>
      <el-table-column
        prop="refresh_token"
        label="refresh_token"
        width="250">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="160">
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total >= 20"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
  </d2-container>
</template>

<script>
import { cooperationshoplist } from '@api/sys.login'
export default {
  name: 'merchants',
  data(){
    return{
      tableData:[],
      page:1,
      total:0,
      activval:'',
      activlist:[
        {
          value: 0,
          label:'未激活',
        },
        {
          value: 2,
          label:'已激活',
        }
      ],
      auditval:'',
      auditlist:[
        {
          value:'商户名',
          label:'商户名',
        },
        {
          value:'店铺名',
          label:'店铺名',
        }
      ],
      iptval:'',
      timeval:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted(){
    let params = {
      page:this.page,
      pageSize:20
    }
    this.getUserList(params)
  },
  methods:{
    handleCurrentChange(val) {
      this.page = val
      this.onSearch()
    },
    // 获取列表数据
    getUserList(params){
      cooperationshoplist(params)
        .then((res) => {
          console.log('店铺信息',res)
          let temp = res.data
          temp.forEach(element => {
            element.create_time = this.getLocalTime(element.create_time)
          });
          this.tableData = temp
          this.total = res.count
        })
        .catch(() =>{
          this.tableData = []
          this.total = 0
        })
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
    },
    //查询
    onSearch(){
      if(this.timeval.length>0){
        let list = [...this.timeval]
        let index = list[1].indexOf(" ");
        list[1] = list[1].substring(0,list[1].length-index+1) + ' 23:59:59'
        this.timeval[1] = list[1]
      }
      let params = {
        page:this.page,
        pageSize:20,
        time:this.timeval,
        status:this.activval
      }
      this.auditval == '商户名' ? params.name = this.iptval : params.shop = this.iptval
      // console.log('参数',params)
      this.getUserList(params)
    },
  }
}
</script>

<style lang="scss" scoped>
.shoplist{

}
</style>

<style lang="scss">
.shoplist{
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
